<template>
  <div class="app-container preWorkBox">
    <!-- 开工前准备页面 -->
    <StepsItem ref="StepsItem" :changeObj="changeObj"></StepsItem>
    <MaskLayer :centerDialogVisible=visible :showClose="true" :clearStepsItemData="clearStepsItemData"
      :onUnlock="onUnlock" />
    <div class="content">
      <div>
        <el-form ref="form" class="perForm" :model="form" :rules="rules" label-width="auto" size="medium">
          <el-form ref="form" class="perForm" :model="form" label-width="auto" size="medium">
            <el-form-item label="SN码:" prop="sn">
              <el-input id="scanner-input" v-model="form.sn" type="textarea" placeholder="请输入SN码"
                :autosize="{ minRows: 2, maxRows: 5 }" style="width: 400px;" @input="snbutton" />
            </el-form-item>
          </el-form>

          <el-form-item label="物料备料" prop="materialPreparation">
            <el-radio-group v-model="form.materialPreparation">
              <el-radio label="1" value="1">正常</el-radio>
              <el-radio label="0" value="0">异常</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="辅料备料" prop="auxiliaryPreparation">
            <el-radio-group v-model="form.auxiliaryPreparation">
              <el-radio label="1" value="1">正常</el-radio>
              <el-radio label="0" value="0">异常</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="设备运行状态" prop="runningState">
            <el-radio-group v-model="form.runningState">
              <el-radio label="1" value="1">正常</el-radio>
              <el-radio label="0" value="0">异常</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="工装" prop="frock">
            <el-radio-group v-model="form.frock">
              <el-radio label="1" value="1">正常</el-radio>
              <el-radio label="0" value="0">异常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <div class="erroDiv">
          <p v-if="
            form.materialPreparation == '0' ||
            form.auxiliaryPreparation == '0' ||
            form.runningState == '0' ||
            form.frock == '0'
          ">
            开工前准备存在异常状态
          </p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="reset" style="font-size: 24px">重 置</el-button>
          <el-button type="primary" style="font-size: 24px" @click="submitForm" :disabled="form.materialPreparation == '1' &&
            form.auxiliaryPreparation == '1' &&
            form.runningState == '1' &&
            form.frock == '1'
            ? false
            : true && !!form.sn
            ">提 交</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import MaskLayer from "../components/maskLayer.vue";
import StepsItem from "../components/stepsItem.vue";
// preparation
import { preparation, listWorkorder2, unLock } from "@/api/apppro/index";
import moment from "moment";

export default {
  name: "preWorkPreparation",
  components: { StepsItem, MaskLayer },
  data() {
    return {
      snCode: "",
      visible: false,
      tab: "1",
      form: {},
      rules: {
        materialPreparation: [
          { required: true, message: "请选择物料备料", trigger: "change" },
        ],
        auxiliaryPreparation: [
          { required: true, message: "请选择辅料备料", trigger: "change" },
        ],
        runningState: [
          { required: true, message: "请选择设备运行状态", trigger: "change" },
        ],
        frock: [
          { required: true, message: "请选择工装状态", trigger: "change" },
        ],
      },
      formObj: {},
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {

  },
  mounted() {
    // this.visible = true
  },
  methods: {
    onUnlock() {
      const param = {
        snCode: this.snCode
      }
      unLock(param).then(res => {
        if (res.code == 200) {
          this.visible = false
          this.$modal.msgSuccess(res.msg)
        }
      })
    },
    statusfun(index) {
      return "process";
    },
    submitForm() {
      if ((this.form.sn == null || this.form.sn === '') || (!this.formObj.workorderCode)) {
        this.$modal.msgWarning('请先扫描正确的SN码');
        return false
      }
      this.$refs["form"].validate((valid) => {
        let params = {};
        this.form.curDate = moment().format("YYYY-MM-DD");
        delete this.formObj.routeProcesses;
        console.log(this.form, "========form========");
        this.form.processName = this.formObj.processName;
        this.form.processCode = this.formObj.processCode;
        this.form.itemCode = this.formObj.productCode;
        this.form.itemName = this.formObj.productName;
        // this.form.workstationCode = 'WS0102'
        // this.form.workorderCode = "MO000219"
        this.form.specification = this.formObj.productSpc;
        params = { ...this.formObj, ...this.form };
        console.log(this.formObj, "======formObj=======");
        console.log(params, "======params=======");
        if (valid) {
          preparation(params).then((res) => {
            console.log(res, "=======res=======");
            this.$modal.msgSuccess(res.msg);
            if (
              this.form.materialPreparation == "1" &&
              this.form.auxiliaryPreparation == "1" &&
              this.form.runningState == "1" &&
              this.form.frock == "1"
            ) {
              console.log("全正常", typeof (this.form.sn));
              this.$router.push({ path: "/appPro/keyBingding", query: { snCode: this.form.sn } }).catch(() => { });
            }
          });
        }
      });
    },
    //
    changeObj(obj) {
      this.formObj = obj;
    },
    reset() {
      this.form = {
        resource: undefined,
        auxiliaryPreparation: undefined,
        runningState: undefined,
        frock: undefined,
      };
      // this.autoGenFlag = false;
      this.resetForm("form");
    },
    clearStepsItemData() {
      this.$refs.StepsItem.clearData()
      this.visible = false
      this.form.sn = ""
    },
    //sn扫码函数
    snbutton(e) {
      var myInputOrder = document.getElementById("scanner-input");
      myInputOrder.onkeydown = (even) => {
        console.log(even, "=====e=====");
        if (even.key == "Enter") {
          //赋值给v-model
          this.form.sn = e ? e.trim() : '';
          // let param = {
          //   snCode: this.form.sn,
          // };
          // headerInfo(param).then((res) => {
          //   if(res.code == 200){
          //     this.resData = res.data
          //     console.log(res,'正常的res');
          //   }
          // });
          console.log(333, e, this.form.sn)
          this.$refs.StepsItem.getList(this.form.sn)
          this.snCode = this.form.sn
          listWorkorder2({ snCode: this.form.sn }).then(res => {
            if (res.msg === '该SN码在此工位已锁定') {
              this.visible = true
            } else {
              this.visible = false
            }
          }).catch(err => {

          })
        }
      };
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// .preWorkBox ::v-deep .el-icon-check::before {
//   // display: none !important;
//   content: "",
// }

.perForm ::v-deep .el-form-item__label {
  font-size: 18px;
}

.perForm ::v-deep .el-radio__label {
  font-size: 18px;
}

.erroDiv {
  font-size: 16px;
  color: red;
}

.content {
  margin-top: 20px;
  text-align: center;
  display: flex;
  justify-content: center;

  div {
    font-size: 18px;
  }
}
</style>